<template>
  <div class="main">
    <div class="page">
      <div ref="container">
        <h2 v-if="detailData.title" class="info-title" style="text-align: center;">{{detailData.title}}
        </h2>
        <div class="sub-items" v-if="$route.query.type ==2">
          <span v-if="detailData.noticeTime">发表于：{{detailData.noticeTime}}</span>
          <span v-if="!print" class="fr pointer el-icon-printer" @click="printerArticle" style="float:right">打印页面
          </span>
          <span class="fr el-icon-view" style="float:right">浏览次数：{{detailData.hits ? detailData.hits  : 0}}
          </span>
        </div>
        <div class="ql-bubble">
          <div v-html="detailData.content" v-if="detailData.content" class="infoDetailsData ql-editor"></div>
        </div>
        <div class="noData" v-show="!detailData.content">
          暂无数据
        </div>

      </div>

      <div class="line" v-if="detailData.newsFiles && detailData.newsFiles.length"></div>
      <div class="file-list" v-if="detailData.newsFiles && detailData.newsFiles.length">
        <el-row class="downFile-row">
          <el-col :span="8" v-for="(v,i) in detailData.newsFiles" :key="i" class="downFile-col">
            <div class="file-container">
              <span class="img-style"></span>
              <span> 附件{{i+1}} ：</span>
              <a class="downFileA" @click="downFile(v)">{{v.fileName}}</a>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { getInfoDetail, getSinDetail } from '../../../api/info';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
  data () {
    return {
      detailData: {},
      print: false
    }
  },
  created () {
    this.getDetail();
  },
  watch: {
    $route (val) {
      this.getDetail();
    }
  },
  methods: {
    getDetail () {
      if (this.$route.query.type == 1) {
        getSinDetail(this.$route.query.id).then(data => {
          if (data.success) {
            this.detailData = data.data || {};
            if (this.detailData.content.indexOf('<') != -1) {
              this.detailData.content = data.data.content;
            } else {
              this.detailData.content = decodeURI(data.data.content)
            }
          } else {
            this.$message.error(`${data.msg}`);
          }
          this.tableLoading = false;
        });
      } else {
        getInfoDetail(this.$route.query.id).then(data => {
          if (data.success) {
            this.detailData = data.data || {};
            if (this.detailData.content.indexOf('<') != -1) {
              this.detailData.content = data.data.content;
            } else {
              this.detailData.content = decodeURI(data.data.content)
            }
          } else {
            this.$message.error(`${data.msg}`);
          }
          this.tableLoading = false;
        });
      }
    },
    downFile (item) {
      let eleA = document.createElement("a");
      eleA.href = item.filePath;
      eleA.download = item.fileName;
      document.body.appendChild(eleA);
      eleA.click();
      document.body.removeChild(eleA);
    },
    // 打印
    printerArticle () {
      this.print = true;
      setTimeout(i => {
        let newwin = window.open(
          "",
          "newwin",
          "height=" +
          window.screen.height +
          ",width=" +
          window.screen.width +
          ",toolbar=no,scrollbars=auto,menubar=no"
        );
        let bodyHtml = document.body.innerHTML;
        var printHtml = this.$refs.container.innerHTML;
        newwin.document.body.innerHTML = printHtml;
        newwin.print();
        this.print = false;
        newwin.window.close();
      }, 80)
    }
  }
}
</script>

<style scoped>
.page {
    background: #ffffff;
    min-height: 300px;
    padding: 49px 59px 84px 59px;
    min-height: 800px;
    box-sizing: border-box;
}
.info-title {
    margin-bottom: 36px;
    font-size: 32px;
    color: #333333;
    font-weight: 600;
}
.center {
    text-align: center;
}
.sub-items {
    width: 100%;
    height: 32px;
    background: #f8f8f8;
    color: #333333;
    font-size: 14px;
    line-height: 32px;
    padding: 0 32px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    margin-bottom: 40px;
}
.fr {
    float: right;
    margin-left: 92px;
    margin-top: 10px;
}
.pointer {
    cursor: pointer;
}
.infoDetailsData p img {
    width: 100% !important;
}
.line {
    width: 100%;
    height: 2px;
    background: #e8e8e8;
    margin-top: 73px;
}
.file-list {
    padding: 20px;
    margin-top: 36px;
    width: 100%;
    min-height: 145px;
    border: 2px solid #f8f8f8;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
}
.el-icon-view:before,
.el-icon-printer:before {
    margin-right: 5px;
}
.downFile-row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
}
.downFile-row .downFile-col {
    /* border:1px solid red; */
}
.file-container {
    font-size: 14px;
    margin: 20px 0;
    box-sizing: border-box;
}
.downFileA {
    color: #0093ff;
}
a {
    cursor: pointer;
    color: #0093ff;
    vertical-align: middle;
}
.img-style {
    vertical-align: middle;
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: 16px;
    background: url('../../../assets/images/file.png');
}
a {
    color: #222222;
}
.noData {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-top: 1px solid #e5e5e5;
    background: #ffffff;
}
.main {
    width: 1200px;
    margin: 0 auto;
}
</style>